<template>
  <view class="article-container">
    <scroll-view
      scroll-y
      :scrollTop="scrollTop"
      class="article-body"
      :style="{ height: `calc(100vh - ${bottomHeight}px)` }"
    >
      <!-- :style="{ paddingBottom: `${marginBottom}px` }" -->
      <view
        class="article-para-item"
        v-for="para in paragraphs"
        :key="para.id"
        :id="para.id"
      >
        <view
          class="para-box"
          v-if="para.id !== currentId"
          @click="handleClickPara(para)"
        >
          <view class="html-img-fix" v-html="para.html"></view>
        </view>
        <view class="para-editor" v-else>
          <Editor v-model="currentDetail.html" />
        </view>
      </view>
    </scroll-view>
    <view
      class="bottom-placeholder"
      :style="{ height: `${bottomHeight}px` }"
    ></view>
  </view>
</template>

<script>
import Editor from './editor'
import component from '../components.js'
export default {
  mixins: [component],
  components: { Editor },
  data() {
    return {
      paragraphs: [
        {
          id: 'p0',
          text: '第一段',
          html: '<h3>第一段</h3>',
        },
        {
          id: 'p1',
          text: '第二段',
          html: '<h3>er段</h3>',
        },
        {
          id: 'p2',
          text: '第三段',
          html: '<h3>第san段</h3>',
        },
        {
          id: 'p3',
          text: '第三段',
          html: '<h3>第san段</h3>',
        },
        {
          id: 'p4',
          text: '第三段',
          html: '<h3>第san段</h3>',
        },
        {
          id: 'p5',
          text: '第三段',
          html: '<h3>第san段</h3>',
        },
        {
          id: 'p6',
          text: '第三段',
          html: '<h3>第san段</h3>',
        },
        {
          id: 'p7',
          text: '第三段',
          html: '<h3>第san段</h3>',
        },
        {
          id: 'p8',
          text: '第三段',
          html: '<h3>第san段</h3>',
        },
      ],
      marginBottom: 0,
      scrollTop: 0,
      bottomHeight: 40,
      sort: [],
      currentId: '',
      currentDetail: {},
    }
  },
  methods: {
    handleClickPara({ id, html, text }) {
      if (this.currentId === '') {
        // setTimeout(() => {
        // uni.pageScrollTo({
        //   selector: `#${id}`,
        //   duration: 300,
        // })
        // })
        this.currentId = id
        this.currentDetail = {
          text,
          html,
        }
        setTimeout(() => {
          uni
            .createSelectorQuery()
            .in(this)
            .select(`#${id}`)
            .boundingClientRect((data) => {
              console.log('!!!')
              const { height, bottom } = data
              if (bottom > this.windowHeight / 2) {
                this.marginBottom = bottom - this.windowHeight / 2
                this.bottomHeight = bottom - this.windowHeight / 2
                // this.scrollTop = (bottom - this.windowHeight / 2)*4
                setTimeout(() => {
                  this.scrollTop = (bottom - this.windowHeight / 2) * 4 - 0.001
                })
              }
            })
            .exec()
        })
      } else {
        this.currentId = ''
        this.currentDetail = {}
        this.marginBottom = 0
        this.bottomHeight = 0
        this.scrollTop = 0
      }
    },
  },
  computed: {},
}
</script>

<style lang="scss" scoped>
.article-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.article-body {
  transition: 0.5s;
  max-height: 90vh;
}
.half-overflow {
  max-height: 50vh;
}
.article-para-item {
  margin: 10rpx;
  .para-box {
    padding: 10rpx;
    background: white;
    min-height: 120rpx;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
  }
  .para-editor {
  }
}
.bottom-placeholder {
  flex-shrink: 0;
  transition: 0.5s;
}
</style>
